<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>完整库使用 - layui</title>

  <link rel="stylesheet" href="../src/css/layui.css">

  <style>
    body{padding: 10px;}
  </style>
  
</head>
<body>

<textarea style="
  position: fixed; 
  top: 0; 
  bottom: 0; 
  right:0; 
  width: 100px; 
  background-color:#666; 
  z-index:100; 
resize: none;">

</textarea>


<div id="demo1"></div>

<div class="layui-btn-container">
  <button class="layui-btn demo" test-active="test-form">测试弹出式 Form</button>
  <button class="layui-btn demo" test-active="test-use">测试是否重复加载内置组件</button>
</div>
<div class="layui-inline">
  <input class="layui-input" id="date1" placeholder="日期">
</div>

<div class="layui-tab" lay-filter="tabDemo">
  <ul class="layui-tab-title">
    <li class="layui-this" lay-id="1">标题1</li>
    <li lay-id="2">标题2</li>
    <li lay-id="3">标题3</li>
    <li lay-id="4">标题4</li>
    <li lay-id="5">标题5</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
      <div class="layui-form">
        <select name="city" lay-verify="">
          <option value="">请选择一个城市</option>
          <option value="010">北京</option>
          <option value="021">上海</option>
          <option value="0571">杭州</option>
        </select>  
      </div>
    </div>
    <div class="layui-tab-item">
      <div id="test2" class="demo-transfer"></div>
    </div>
    <div class="layui-tab-item">3</div>
    <div class="layui-tab-item">4</div>
    <div class="layui-tab-item">5</div>
  </div>
</div>


<script src="../dist/layui.js"></script>
<script>
console.log(layui.$);

//(function(){
layui.use(function(){
  var $ = layui.jquery
  ,layer = layui.layer
  ,form = layui.form
  ,laypage = layui.laypage
  ,element = layui.element
  ,transfer = layui.transfer
  ,util = layui.util
  ,laydate = layui.laydate;
  
  layer.msg('hello layui');
  //layer.closeAll();
  
  //自动测试
  (function(run){
    if(!run) return;

    var timer = setInterval(function(){
      location.reload();
    }, 1000);
    
    $.ajax({
      url: './all.html'
      ,beforeSend: function(){
        layer.load();
      }
      ,success: function(){
        layer.closeAll('loading', function(){
          setTimeout(function(){
            if($('.layui-layer-loading').length){
              console.error('layer close 异常');
              clearInterval(timer);
            }
          }, 200);
        });
      }
    });
  })(0);
  
  laypage.render({
    elem: 'demo1'
    ,count: 100 //总页数
  });
  
  console.log(lay('#footer').html());
  
  laydate.render({
    elem: '#date1'
  })
  
  //测试加载非内置模块
  /*
  layui.config({
    base: 'extends/'
  }).extend({
    mod1: 'mod1'
    ,mod2: 'mod2'
  }).use('mod1');
  */
  
  
  //定义标题及数据源
  transfer.render({
    elem: '#test2'
    ,title: ['候选文人', '获奖文人']  //自定义标题
    ,data: [
      {"value": "1", "title": "李白"}
      ,{"value": "2", "title": "杜甫"}
      ,{"value": "3", "title": "苏轼"}
      ,{"value": "4", "title": "李清照"}
      ,{"value": "5", "title": "鲁迅", "disabled": true}
      ,{"value": "6", "title": "巴金"}
      ,{"value": "7", "title": "冰心"}
      ,{"value": "8", "title": "矛盾"}
      ,{"value": "9", "title": "贤心"}
    ]
    //,width: 150 //定义宽度
    ,height: 210 //定义高度
  });
  
  //触发事件
  util.event('test-active', {
    'test-form': function(){
      layer.open({
        type: 1
        ,resize: false
        ,content: ['<ul class="layui-form" style="margin: 10px;">'
          ,'<li class="layui-form-item">'
            ,'<label class="layui-form-label">输入框</label>'
            ,'<div class="layui-input-block">'
              ,'<input class="layui-input" name="field1">'
            ,'</div>'
          ,'</li>'
          ,'<li class="layui-form-item">'
            ,'<label class="layui-form-label">选择框</label>'
            ,'<div class="layui-input-block">'
              ,'<select name="field2">'
                ,'<option value="A">A</option>'
                ,'<option value="B">B</option>'
              ,'<select>'
            ,'</div>'
          ,'</li>'
          ,'<li class="layui-form-item" style="text-align:center;">'
            ,'<button type="submit" lay-submit lay-filter="*" class="layui-btn">提交</button>'
          ,'</li>'
        ,'</ul>'].join('')
        ,success: function(layero){
          layero.find('.layui-layer-content').css('overflow', 'visible');
          
          form.render().on('submit(*)', function(data){
            layer.msg(JSON.stringify(data.field));
          });
        }
      });
    }
    ,'test-use': function(othis){
      layui.use(['laytpl','laypage','laydate','jquery','layer','util','element','upload','slider','colorpicker','form','tree','transfer','table','carousel','rate','flow','layedit','code'], function(){
        layer.tips('请观察 Network 是否有重复加载 js 文件。如果没有任何新的请求，则代表正常。', othis, {
          time: 10*1000
        });
      });
    }
  });
  
});
//})();
</script>



<span class="layui-breadcrumb" lay-separator="-">
  <a href="">首页</a>
  <a href="">国际新闻</a>
  <a href="">亚太地区</a>
  <a><cite>正文</cite></a>
</span>

<div id="footer">© footer</div>

</body>
</html>
